<template>
	<view>
		<view class="box">
			<view class="box-header" v-if="type != 1 && isLandscape">
				<view :class="{'box-header-l': true, 'box-header-l-landscape' : isLandscape }">
					<view class="box-header-title">自检系统V1.0</view>
					<!-- <view>
						<picker mode="date" @change="changeDay">
							<view class="box-header-time">
								<text style="margin:0 auto;">{{ value.start_time || '单日数据' }}</text>
								<image :src="ossUrl + `/static/29.png`" mode=""></image>
							</view>
						</picker>
					</view>
					
					<view class="box-header-more" v-if="!isLandscape" @click="open">
						<text style="margin:0 auto;">日期区间</text>
						<image :src="ossUrl + `/static/29.png`" mode=""></image>
					</view> -->
				</view>
				<view class="box-header-l-r" @click="goBack">
					<template v-if="isLandscape">
						<image :src="ossUrl + `/static/20.png`" mode=""></image>
						退出横屏
					</template>
				</view>
			</view>
			<view class="container" v-if="form.length">
				<scroll-view scroll-x="true" class="scroll-view">
					<view class="table">
						<view class="table-row table-header">
							<view class="table-cell sticky-col"></view>
							<view class="table-cell sticky-col-l" v-for="(it,index) in form" :key="index">{{index + 1}}洞</view>
							<view class="table-cell sticky-col-l">结果</view>
						</view>
						<view class="table-row">
							<view class="table-cell sticky-col">标准杆数</view>
							<view class="table-cell" v-for="(it,index) in form" :key="index">
								<input type="number" v-model="it.standard_club_count" v-if="type == 1"/>
								<template v-else>{{it.standard_club_count}}</template>
							</view>
							<view class="table-cell">
								{{getCount}}杆
							</view>
						</view>
						<view class="table-row">
							<view class="table-cell sticky-col">杆数</view>
							<view class="table-cell" v-for="(it,index) in form" :key="index">
								<input type="number" v-model="it.total_rod_number" v-if="type == 1"/>
								<template v-else>{{it.total_rod_number}}</template>
							</view>
							<view class="table-cell">
								{{result.total_rod_number_sum || ''}}
							</view>
						</view>
						<view class="table-row">
							<view class="table-cell sticky-col">球杆/距离</view>
							<view class="table-cell table-cell-more" v-for="(it,itIndex) in form" :key="itIndex">
								<view class="table-cell-more-item">
									<!-- <view>一号木：100码</view>
									<view>3号铁：100码</view>
									<view>推杆：5码</view> -->
									<view class="table-cell-more-item-tx" v-for="(item,index) in it.rod_distances" :key="item">
										<text>{{item.club}}：</text>
										<template v-if="type == 1">
											<input type="number" v-model="item.distance"/>
											<image :src="ossUrl + '/static/image/6.png'" mode="" @click="del(index,it)"></image>
										</template>
										<template v-else>
											{{item.distance}}
										</template>
									</view>
									<picker mode="selector" :range="selectData" range-key="name" @change="e=> rodDistancesChange(e,itIndex)">
										<view class="table-cell-more-item-img" v-if="type == 1">
											<image :src="ossUrl + '/static/image/add.png'" mode=""></image>
										</view>
									</picker>
								</view>
							</view>
							<view class="table-cell">
								{{result.max_distance_avg || ''}}
							</view>
						</view>
						<view class="table-row">
							<view class="table-cell sticky-col">上球道率</view>
							<view class="table-cell" v-for="(it,index) in form" :key="index">
								<view class="table-cell-select" v-if="type == 1">
									<picker mode="selector" :range="picker" range-key="label" @change="e=> change(e,index,'fairway_hit_rate')">
										<image :src="it.fairway_hit_rate === 0 ? ossUrl + '/static/14.png' : it.fairway_hit_rate === 1 ? ossUrl + '/static/1.png' : ''" mode=""></image>
									</picker>
								</view>
								<view class="table-cell-select" v-else>
									<image :src="it.fairway_hit_rate === 0 ? ossUrl + '/static/14.png' : it.fairway_hit_rate === 1 ? ossUrl + '/static/1.png' : ''" mode=""></image>
								</view>
							</view>
							<view class="table-cell">
								{{result.fairway_hit_rate_percent || ''}}
							</view>
						</view>
						<view class="table-row">
							<view class="table-cell sticky-col">上果岭率</view>
							<view class="table-cell" v-for="(it,index) in form" :key="index">
								<view class="table-cell-select" v-if="type == 1">
									<picker mode="selector" :range="picker" range-key="label" @change="e=> change(e,index,'green_in_regulation_rate')">
										<image :src="it.green_in_regulation_rate === 0 ? ossUrl + '/static/14.png' : it.green_in_regulation_rate === 1 ? ossUrl + '/static/1.png' : ''" mode=""></image>
									</picker>
								</view>
								<view class="table-cell-select" v-else>
									<image :src="it.green_in_regulation_rate === 0 ? ossUrl + '/static/14.png' : it.green_in_regulation_rate === 1 ? ossUrl + '/static/1.png' : ''" mode=""></image>
								</view>
							</view>
							<view class="table-cell">
								{{result.green_in_regulation_rate_percent || ''}}
							</view>
						</view>
						<view class="table-row">
							<view class="table-cell sticky-col">界外球</view>
							<view class="table-cell" v-for="(it,index) in form" :key="index">
								<input type="number" v-model="it.out_of_bounds_count" v-if="type == 1"/>
								<template v-else>{{it.out_of_bounds_count}}</template>
							</view>
							<view class="table-cell">
								{{result.out_of_bounds_count_sum || ''}}
							</view>
						</view>
						<view class="table-row">
							<view class="table-cell sticky-col">下水数</view>
							<view class="table-cell" v-for="(it,index) in form" :key="index">
								<!-- <view class="table-cell-select" v-if="type == 1">
									<picker mode="selector" :range="picker" range-key="label" @change="e=> change(e,index,'water_hazard_rate')">
										<image :src="it.water_hazard_rate === 0 ? ossUrl + '/static/14.png' : it.water_hazard_rate === 1 ? ossUrl + '/static/1.png' : ''" mode=""></image>
									</picker>
								</view>
								<view class="table-cell-select" v-else>
									<image :src="it.water_hazard_rate === 0 ? ossUrl + '/static/14.png' : it.water_hazard_rate === 1 ? ossUrl + '/static/1.png' : ''" mode=""></image>
								</view> -->
								<input type="number" v-model="it.water_hazard_rate" v-if="type == 1"/>
								<template v-else>{{it.water_hazard_rate}}</template>
							</view>
							<view class="table-cell">
								{{result.water_hazard_rate_percent || ''}}
							</view>
						</view>
						<view class="table-row">
							<view class="table-cell sticky-col">沙坑数</view>
							<view class="table-cell" v-for="(it,index) in form" :key="index">
								<!-- <view class="table-cell-select" v-if="type == 1">
									<picker mode="selector" :range="picker" range-key="label" @change="e=> change(e,index,'sand_trap_rate')">
										<image :src="it.sand_trap_rate === 0 ? ossUrl + '/static/14.png' : it.sand_trap_rate === 1 ? ossUrl + '/static/1.png' : ''" mode=""></image>
									</picker>
								</view>
								<view class="table-cell-select" v-else>
								
										<image :src="it.sand_trap_rate === 0 ? ossUrl + '/static/14.png' : it.sand_trap_rate === 1 ? ossUrl + '/static/1.png' : ''" mode=""></image>
									
								</view> -->
								<input type="number" v-model="it.sand_trap_rate" v-if="type == 1"/>
								<template v-else>{{it.sand_trap_rate}}</template>
							</view>
							<view class="table-cell">
								{{result.sand_trap_rate_percent || ''}}
							</view>
						</view>
						<view class="table-row">
							<view class="table-cell sticky-col">切杆数</view>
							<view class="table-cell" v-for="(it,index) in form" :key="index">
								<input type="number" v-model="it.chip_shots" v-if="type == 1"/>
								<template v-else> {{it.chip_shots}} </template>
							</view>
							<view class="table-cell">
								{{result.chip_shots_sum || ''}}
							</view>
						</view>
						<view class="table-row">
							<view class="table-cell sticky-col">推杆数</view>
							<view class="table-cell" v-for="(it,index) in form" :key="index">
								<input type="number" v-model="it.putts" v-if="type == 1"/>
								<template v-else> {{it.putts}} </template>
							</view>
							<view class="table-cell">
								{{result.putts_sum || ''}}
							</view>
						</view>
						
						<!-- 继续添加更多行 -->
					</view>
				</scroll-view>
			</view>
			<view class="footer" v-if="!isLandscape && type != 1">
				<!-- <view>
					<image :src="ossUrl + `/static/30.png`" mode=""></image>
					修改
				</view> -->
				<view @click="enterFullScreen">
					<image :src="ossUrl + `/static/20.png`" mode=""></image>
					横屏显示
				</view>
			</view>
		</view>
		<!-- <u-calendar :show="timeShow" mode="range" @confirm="confirm" minDate="2020-06-06"></u-calendar> -->
		<datePicker ref="datePickerRef" @confirm="confirm"/>
	</view>
</template>

<script>
	import datePicker from '@/pagesA/components/datePicker/datePicker.vue'
	import {
		InformationClub,
		InformationProcessGolfData1,
		InformationTimeAxisForm
	} from '@/common/http/api.js'
	export default {
		name: "table",
		components:{
			datePicker
		},
		props: {
			//是否横屏
			isLandscape: {
				type: Boolean,
				default: () => false
			},
			type: {
				type: Number,
				default: () => 1 //1 新增/编辑 2预览
			},
			isHttp:{
				default: ()=> ''
			},
			value:{
				type: Object,
				default:() => {}
			}
		},
		data() {
			return {
				timeShow: false,
				form: [],
				picker:[
					{
						value: 0,
						label: '否'
					},
					{
						value: 1,
						label: '是'
					}
				],
				selectData:[],
				result:{}
			};
		},
		created() {
		
			this.initForm()
			
			InformationClub().then(res=>{
				this.selectData = res.data
				// if(this.isHttp){
				// 	this.init()
				// }
			})
		},
	
		computed:{
			getCount(){
	
				let count = 0
				this.form.forEach(i=>{
					if(uni.$u.test.digits(i.standard_club_count)) {
						count+=	Number(i.standard_club_count)
					}
				})
				return count
			}
		},
		watch:{
			form:{
				handler(val){
					if(this.isHttp) return
					let data = JSON.stringify(val)
					InformationProcessGolfData1({data}).then(res=>{
						this.result = res.data
					})
				},
				deep: true
			}
		},
		methods: {
			confirm(e){
				if(Array.isArray(e) && e.length > 0) {
					this.value.start_time = e[0]
					this.value.end_time = e[e.length - 1]
					this.value.type = 2
					this.timeShow = false
					this.$emit('input',this.value)
					// this.$nextTick(()=>{
					// 	this.init()
					// })
				}
			},
			open(){
				this.$refs.datePickerRef.show()
			},
			initForm(){
				let arr=[]
				this.result = ''
				for (let i = 0; i < 18; i++) {
					arr.push(
						{
							standard_club_count: "",//标准杆数
							total_rod_number: "", //杆数
							rod_distances: [
								// {
								// 	club: "一号杆",
								// 	distance: "500"
								// },
							],//球杆/距离
							fairway_hit_rate: '',//上球道率
							green_in_regulation_rate: '',//上果岭率
							out_of_bounds_count: '',//界外球
							water_hazard_rate: '',//
							sand_trap_rate: '',//沙坑数
							chip_shots: '',//切杆
							putts: '', // 推杆
						}
					)
				}
				this.$nextTick(()=>{
					this.form=arr
				})
			},
			init(){
				this.initForm()
				uni.showLoading()
				InformationTimeAxisForm(this.value).then(res=>{
					this.form = res.data.list
					this.result = res.data.time_axis_Statistics || {}
				}).finally(e=>{
					uni.hideLoading()
				})
			},
			del(index,it){
				it.rod_distances.splice(index,1)
			},
			show(form = '',result = ''){
				this.initForm()
				if(form) {
					if(!(Array.isArray(form) && form.length === 0)) {
						this.form = form
					}
					
				}
				this.result = result
			},
			enterFullScreen() {
				uni.setStorageSync('timeAxisInfo',this.form)
				uni.setStorageSync('timeAxisInfoResult',this.result)
				// 动态切换横屏
				uni.navigateTo({
					url: '/pagesA/table/table'
				})
			},
			goBack() {
				uni.navigateBack()
			},
			rodDistancesChange(e,itIndex){
				console.log('e',e)
				let club = this.selectData[e.detail.value].name
				this.form[itIndex].rod_distances.push({
					club,
					distance: ''
				})
				this.$forceUpdate()
			},
			change(e,index,name){
				this.form[index][name] = Number(e.detail.value)
			},
			changeDay(e){
				console.log('e',e,this.value)
				this.value.start_time = e.detail.value
				this.value.end_time = e.detail.value
				this.$emit('input',this.value)
				this.$nextTick(()=>{
					this.init()
				})
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		width: 100%;
		background: #343434;
		border-radius: 15px;

		.box-header {
			width: 100%;
			padding: 19.5px 15px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			box-sizing: border-box;

			.box-header-l {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.box-header-title {
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 13px;
					color: #FFFFFF;
				}

				.box-header-time {

					height: 28px;
					background: #FFFFFF;
					border-radius: 14px;
					display: flex;
					align-items: center;
					box-sizing: border-box;
					padding: 8.5px 2.5px;
					font-family: PingFang SC;
					font-weight: 400;
					font-size: 13px;
					color: #292929;

					image {
						width: 13px;
						height: 13px;
						margin-left: 5px;
					}
				}

				.box-header-more {
					min-width: 155px;
					height: 28px;
					background: #FFFFFF;
					border-radius: 14px;
					display: flex;
					align-items: center;
					box-sizing: border-box;
					padding: 8.5px 2.5px;
					font-family: PingFang SC;
					font-weight: 400;
					font-size: 13px;
					color: #292929;

					image {
						width: 13px;
						height: 13px;
						margin-left: 5px;
					}
				}
			}

			.box-header-l-landscape {
				flex: unset !important;

				&>view {
					margin-right: 20px;
				}
			}

			.box-header-l-r {
				display: flex;
				align-items: center;
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 13px;
				color: #FFFFFF;

				image {
					width: 21px;
					height: 21px;
					margin-right: 5px;
				}
			}
		}
	}

	.content {
		width: 100%;
		overflow-x: scroll;

		.content-list {
			display: grid;
			grid-template-columns: repeat(18, 1fr);
			position: relative;
			padding-left: 90.5px;

			&>view {
				width: 90.5px;
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 12px 0;
			}

			.content-l {
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 12px;
				color: #FFFFFF;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 90.5px;
				height: 100%;
				position: sticky;
				height: 100%;
				left: 0;
				background: #252525;
				box-sizing: border-box;
			}
		}
	}

	.container {
		width: 100%;

		.scroll-view {
			width: 100%;

			.table {
				display: flex;
				flex-direction: column;

				.table-row {
					min-width: 81px * 19;
					display: flex;

					.table-cell {
						border: 1px solid #343434;
						padding: 8px 2.5px;
						text-align: center;
						background-color: #fff;
						flex-shrink: 0;
						width: 90.5px;
						font-family: PingFang SC;
						font-weight: bold;
						font-size: 12px;
						color: #1F1F1F;
						box-sizing: border-box;
						display: flex;
						align-items: center;
						justify-content: center;

						/* 具体宽度根据需求调整 */
						.table-cell-more-item {
							font-family: PingFang SC;
							font-weight: 500;
							font-size: 10px;
							color: #1F1F1F;
						}

						.table-cell-more {
							flex-wrap: wrap;
						}

						image {
							width: 15px;
							height: 15px;
						}
					}

					.sticky-col {
						position: -webkit-sticky;
						position: sticky;
						left: 0;
						background: #FFC619;
						z-index: 9;
					}
				}
			}
		}
	}

	.sticky-col {

		background: #252525 !important;
		color: #FFFFFF !important;
		border: 1px solid #252525 !important;
	}

	.sticky-col-l {
		background-color: #ffd700 !important;
	}

	.footer {
		width: 100%;
		display: flex;
		justify-content: flex-end;
		align-items: flex-end;
		padding: 24.5px 40px;
		box-sizing: border-box;

		view {
			display: flex;
			align-items: center;
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 13px;
			color: #FFFFFF;

			image {
				width: 21px;
				height: 21px;
				margin-right: 5px;
			}
		}

		view:last-child {
			margin-left: 30px;
		}
	}
	.table-cell-more-item-tx {
		width: 100%;
		display: flex;
		align-items: center;
		input {
			flex: 1;
			min-width: 0;
			text-align: left;
		}
		image {
			width: 12px;
			height: 12px;
			margin-left: 3px;
		}
	}
	.table-cell-more-item-img {
		width: 100%;
		image{
			width: 30px!important;
			height: 30px!important;
		}
	}
	.table-cell-select {
		width: 100%;
		height: 100%;
	}
</style>